import { Space } from 'antd';
import { useState, useEffect, useRef } from 'react'
import Measure from './Measure';
import { ClearOutlined, FullscreenOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
import FullScreen from './FullScreen';
// import Stat from './Stat';
import { createHighlightLayer } from '../../../../../../../utils/helper/mapHelper';
import useMap from '../../hooks/useMap';
import DarkBtn from '../../../../../../common/DarkBtn';
export default function Toolbar(props) {

    const map = useMap();
    const measureRef = useRef();
    const zoom = (delta) => {
        if (map) {
            const view = map.getView();
            const zoomLevel = view.getZoom();
            if (delta > 0) {
                view.animate({
                    zoom: zoomLevel + 1
                });
            } else {
                view.animate({
                    zoom: zoomLevel - 1
                });
            }
        }
    }
    return <div style={{
        position: "absolute",
        right: 20,
        // top: 20,
        bottom: 20
    }}>
        <Space direction="vertical" >
            <Measure ref={measureRef} />
            <DarkBtn icon={<ClearOutlined />} title="清除" onClick={e => {
                map.getLayers().getArray().forEach(layer => {
                    if (layer.get('temp')) {
                        layer.getSource?.()?.clear()
                    }
                });
                map.getOverlays()?.getArray()?.forEach(overlay => {
                    map.removeOverlay(overlay)
                })
                measureRef.current?.clear();
                const highlightLayer = createHighlightLayer(map);
                highlightLayer.clear();
            }}></DarkBtn>
            <DarkBtn icon={<ZoomInOutlined />} title="放大" onClick={e => {
                zoom(1)
            }}></DarkBtn>
            <DarkBtn icon={<ZoomOutOutlined />} title="缩小" onClick={e => {
                zoom(-1)
            }}></DarkBtn>
            <FullScreen />
            {/* <Stat /> */}
        </Space>
    </div>;
}